<template>
	<view>
		<view class="head-nav">
			<view @click="checkRepair(1)"><text :class="repair == 1 ? 'activite' : ''">项目进度</text></view>
			<view @click="checkRepair(2)"><text :class="repair == 2 ? 'activite' : ''">施工数据</text></view>
		</view>
		<view>
			<view v-show="repair == 1">
				<!-- 项目进度 -->
				<view class="projectProgress">
					<view class="shuju">
						<text>基本信息</text>
					</view>
					<!-- 派工单号 -->
					<view>
						<text>派工单号</text>
						<text class="basic-ation">{{epoxyDateil.planCode}}</text>
					</view>
					<!-- 设备名称 -->
					<view>
						<text>设备名称</text>
						<text class="basic-ation">{{epoxyDateil.eppEpEpoxyProjectPlanFacilityData.facilityName}}</text>
					</view>
					<!-- 开工日期 -->
					<view>
						<text>开工日期</text>
						<text class="basic-ation">{{epoxyDateil.beginTime}}</text>
						<!-- <text>{{progressList.beginTime.split('T')[0]}}</text> -->
					</view>
					<!-- 交付日期 -->
					<view class="check">
						<text>交付日期</text>
						<text class="basic-ation">{{epoxyDateil.endTime}}</text>
					</view>
				</view>
				<!-- 步骤条 v-if="stepIndex > 0"-->
				<view class="stepBar">
					<view class="epoxy-steps">
						<!-- 左边接单和时间 -->
						<view class="steps-context" style="width: 150px;">
							<view class="context-value" v-for="(item,index) in filtrationArray" :key="index"  :class="{'active':item['active']}">
								<view class="value-backgroud">
									<view class="disPlayViewsad" v-if="item.status!=1"></view>
									<text v-if="item.status==1">{{item.stepName}}</text>

									<text v-if="item.status!=1" class="colorblank">{{item.stepName}}</text>
									<view class="disPlayView" v-if="item.countTime!='0.0' && item.countTime">
										<text>{{item.countTime}}h</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 中间循环的线 -->
						<view class="speed-progress">
							<view class="speed-utext" v-for="(item,index) in stuaWest" :key="index">
								<uni-icons type="smallcircle-filled" size="14" color="#8A8A8A" v-if="item==1" />
								<uni-icons type="circle" size="14" color="#8A8A8A" v-if="item==0" />
								<uni-icons type="smallcircle-filled" size="14" color="#FFAA00" v-if="item==2" />

								<view class="line-segment" v-if="index!=stuaWest.length-1"></view>
							</view>
						</view>
						<!-- 右边具体的数据 -->
						<view class="steps-context">
							<view class="context-value" v-for="(item,index) in filtrationArray" :key="index">
								<view class="takeRders" :class="{'active':item['active']}">
									<view>
										<text class="fontText">{{item.remark}}</text>
									</view>
									<!-- 定位 -->
									<view class="locatIcon"
										v-if="(item.status!=0 && item.stepName!='接单') && item.gps!=''">
										<image class="locateimgae"
											src="http://106.14.56.171:15016/images/blank/positioning.png" />
										<view class="itemGps">
											<view><text>打卡：{{item.gps}}</text></view>
										</view>
									</view>
									<text v-if="item.status!=0">{{item.createTime}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 施工数据- -->
			<view v-show="repair == 2">
				<view class="constructionData">
					<!-- 设备固化剂批号 -->
					<view v-for="item in construction.epoxyPlanDataList" :key="item.stepInfoId"
						:class="item.display ? 'epoxy-pandata-flex':'epoxy-pandata'">
						<view class="step-name" style="width: 450rpx;">
							{{item.stepInfoName}}<text v-if="item.dataUnit!=null">({{item.dataUnit}})</text>
						</view>
						<view class="step-display" v-if="item.display">
							<view class="step-text-display" v-for="(code) in item.epPrjSetpInfoOutput"
								:key="code.stepInfoId">
								<view class="" v-if="stepContentText(code)">
									<text>{{code.stepInfoName}}</text>
									<text>{{stepContentText(code)}}</text>
								</view>
							</view>
						</view>
						<view class="step-context" v-else>
							{{item.stepContent?item.stepContent.replace(/-/g, '/').replace('T',' ').slice(0,16):''}}
						</view>
					</view>
				</view>
				<!-- 照片 -->
				<view class="constructionPhotos">
					<view style="padding: 20rpx 0 20rpx 0;">
						<h3>照片</h3>
					</view>
					<!-- 设备铭牌照片\围堰完成照片 -->
					<view class="finish">
						<view class="photos" @click="clickPreview(0,'1')">
							<text>设备铭牌照片</text>
							<image src="http://106.14.56.171:15016/images/epoxyPouringImages/redPhoto.png" />
						</view>

						<view class="photos" @click="clickPreview(0,'2')">
							<text>围堰完成照片</text>
							<image src="http://106.14.56.171:15016/images/epoxyPouringImages/redPhoto.png" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 图片浏览 -->
		<previewImage ref="previewImage" :imgdefault="imgsList"></previewImage>
	</view>
</template>

<script>
	import {
		Desensitized
	} from '../../config/desensitization.js'
	import fileImage from '@/components/fileImage/fileImage.vue'
	import previewImage from '@/components/previewImage/previewImage.vue';
	import {
		timeSplice,
		CurrentRouter
	} from '@/config/CurrentRouter.js'
	export default {
		components: {
			fileImage,
			previewImage
		},
		data() {
			return {
				stvalue: '',
				stuaWest: '',
				stuatuEl: [],
				statusArray: '',
				userName: '',
				shipNumber: '', //船号
				facilities: '', //设备
				erpId: '', //环氧详情ID
				repair: 1, // 切换tabs页 修复件合格件
				loopLine: [], //循环线

				epoxyDateil: {
					eppEpEpoxyProjectPlanFacilityData: {},
					eppEpPlanWorkorderDetails: [], // 进度
				}, // 项目进度数据
				stepIndex: 7, // 步骤跳数据
				construction: {
					eppEpEpoxyProjectPlanFacilityData: {}
				}, // 施工数据
				active: 0, //默认第几条
				imgsList: [], // 预览图片
				filtrationArray: [] //过滤三个数据
			}
		},
		onLoad(option) {
			// console.log('555555555555555', option)
			this.erpId = option.planId;
			this.shipNumber = option.epPrjName; //船号
			this.facilities = option.facilityName; //设备
			this.repair = option.repair //更多数据跳转到施工数据
			uni.setNavigationBarTitle({
				title: this.shipNumber + this.facilities
			});
			if (!option.planId) {
				uni.navigateBack({
					delta: 1
				})
				return
			}
			this.ProjectProgressList() //获取项目进度列表
			this.constructionDatas() //施工数据
		},
		methods: {
			/**
			 * 时间： 2022/8/16，An
			 * 功能： 派工单进度
			 * 接口:  'api/EpoxyProject/EpoxyProjectPlanDataLog'
			 * 参数： planId-->派工单id
			 */
			ProjectProgressList() {
				this.$http.get(`api/EpoxyProject/EpoxyProjectPlanDataLog?planId=${this.erpId}`).then(res => {
					this.epoxyDateil = res

					res.phone = Desensitized.desensitizedPhone(res.phone),
						res.beginTime = timeSplice(res.beginTime, 4, '/')
					res.endTime = timeSplice(res.endTime, 4, '/')
					// 过滤res.eppEpPlanWorkorderDetails数组,B101,B201,B801,接单,出发,离开船长
					let dataVue = ['B101', 'B201', 'B801']
					this.filtrationArray = res.eppEpPlanWorkorderDetails.filter(ele => !dataVue.includes(ele
						.stepCode))



					// let aa = this.filtrationArray.filter(eal => eal.status != 0)
					// console.log(aa, 1111111);

					this.loopLine = this.filtrationArray //循环线
					//循环赋值为   1实心灰色，0空心，2黄色实心
					let stuatuss = this.filtrationArray.map(v => v.status)
					let stauTwo = stuatuss.findIndex(v => v === 0) - 1

					if (stauTwo == -2) {
						stauTwo = stuatuss.length - 1
					}
					stuatuss[stauTwo] = 2
					this.stuaWest = stuatuss
					// if (this.stuaWest.includes(2) == true) {
					// 	this.stvalue = 2;
					// }
					// console.log(this.stuaWest, this.stuaWest.includes(2), 5555555555);
					// 过滤status==0的
					this.filtraStatus = this.filtrationArray.filter(eal => eal.status != 0) // 1
					this.filtraStatus[stauTwo].active = true
					this.filtrationArray[stauTwo].active = true


					// Array.isArray()检查对象是否为数组
					if (Array.isArray(this.filtraStatus)) {
						this.filtraStatus.forEach((code,
							index) => {
							let timesteam;
							let prveTime = new Date(code.createTime).getTime()
							try {
								let nextTime = this.filtraStatus[index + 1].createTime
								let currentTime = new Date(nextTime).getTime()
								timesteam = ((currentTime - prveTime) / 1000 / 60 / 60).toFixed(1);
							} catch (err) {}
							code.countTime = timesteam || ''
							code.createTime = createTime(code.createTime)
						})

						function createTime(code) {
							if (!code) return ''
							code = code.replace(/-/g, '/')
							let CodeList = code.split('T')
							let CodeListTwo = CodeList[1].split(':')
							return `${CodeList[0]} ${CodeListTwo[0]}:${CodeListTwo[1]} `
						}
					}

				})
			},
			/**
			 * 时间： 2022/8/16，An
			 * 功能： 派工单施工数据
			 * 接口:  'api/EpoxyProject/EpoxyProjectPlanDataLog'
			 * 参数： planId-->派工单id
			 */
			constructionDatas() {
				// let data = this.gatherData()
				this.$http.get(`api/EpoxyProject/EpoxyProjectPlanDataList?planId=${this.erpId}`).then(res => {
					res.beginTime = timeSplice(res.beginTime, 4, '/')
					res.endTime = timeSplice(res.endTime, 4, '/')
					if (Array.isArray(res.epoxyPlanDataList)) {
						res.epoxyPlanDataList = res.epoxyPlanDataList.map((code => {
							return {
								...code,
								display: code.epPrjSetpInfoOutput.length <= 0 ? false : true
							}
						}))
					}
					this.construction = res;
					// console.log('施工数据', this.construction);
				})
			},
			stepContentText(code) {
				// console.log(code)
				// code.epPrjSetpInfoOutput[0].epPrjSetpInfoOutput.push(code.epPrjSetpInfoOutput[0])
				if (Array.isArray(code.epPrjSetpInfoOutput) && code.epPrjSetpInfoOutput.length > 0) {
					let list = [];
					code.epPrjSetpInfoOutput.forEach((item) => {
						if (Array.isArray(item.epPrjSetpInfoOutput) && item.epPrjSetpInfoOutput.length != 0) {
							list = list.concat(item.epPrjSetpInfoOutput)
						} else {
							list.push(item)
						}
					})
					let MapList = []
					list.forEach(key => {
						if (key.stepContent) MapList.push(key.stepContent)
					})
					if (Array.isArray(MapList) && MapList.length > 0) return ':' + MapList.join(' - ')
					else return false
				}
			},
			// 预览图片
			clickPreview(index, code) {
				let userCode = CurrentRouter({})
				if (userCode) return
				let imgList = []
				// 设备铭牌照片
				if (code == '1') {
					const {
						filePath_W
					} = this.construction.facilityImgs
					imgList = [filePath_W]
				}
				// 围堰完成照片
				if (code == '2') {
					imgList = this.construction.cofferdamImgs.map(item => item.filePath_W)
				}
				if (Array.isArray(imgList) && imgList.length <= 0) {
					uni.showToast({
						title: `没有${ code == '1'?'设备铭牌':'围堰'}照片`,
						icon: 'none'
					})
					return
				}
				this.imgsList = imgList
				console.log(imgList)
				setTimeout(() => {
					this.$refs.previewImage.open(index)
				})
			},
			// 点击照片,弹出提示框
			lickCheck() {
				uni.showToast({
					title: '请到App查看',
					icon: 'none'
				});
			},
			// 点击切换
			checkRepair(val) {
				this.repair = val;
			}
		}
	}
</script>

<style lang="less" scoped>
	view {
		font-size: 28rpx;
	}

	// 点击切换页面
	.head-nav {
		height: 80rpx;
		display: flex;
		background-color: #fff;
		line-height: 80rpx;
		text-align: center;

		view {
			margin-left: 40rpx;
			width: 20%;
			font-weight: 500;
			// background-color: aqua;
		}
	}

	// 项目详情下面的横杆
	.activite {
		color: #b4001e;
		padding-bottom: 10rpx;
		border-bottom: #b4001e solid 8rpx;
	}

	// 项目进度
	.projectProgress {
		width: 95%;
		background-color: #ffffff;
		border-radius: 15rpx;
		margin: auto;
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 0 0 25rpx 0;

		>view {
			margin-left: 40rpx;
			height: 40rpx;
			display: flex;
			margin-top: 19rpx;
		}

		>view:nth-child(2) {
			width: 60%;

			>image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		>view:nth-child(5) {
			width: 60%;

			.check {
				color: #b3001e;
				border-bottom: 4rpx solid #b3001e;
			}
		}

		>view:nth-child(6) {
			padding: 0 0 20rpx 0;
		}
	}

	.basic-ation {
		margin-left: 20rpx;
	}


	// 步骤条
	.stepBar {
		width: 95%;
		height: 1000rpx;
		background-color: #ffffff;
		margin: auto;
		margin-top: 15rpx;
		border-radius: 15rpx;

		/deep/ .uni-steps__column-text {
			padding: 20rpx 16rpx;
			margin: 40rpx 0;
			margin-right: 150rpx;
			border-bottom: none;
			background-color: #F9F9F9;
		}
	}

	// 施工数据 基本信息
	.basicInformation {
		width: 95%;
		height: 300rpx;
		background-color: #ffffff;
		margin: auto;
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		border-radius: 15rpx;
	}

	.basicInformation>view {
		margin-left: 40rpx;
		// background-color: aqua;
		display: flex;
	}

	.basicInformation>view:nth-child(2) {
		width: 60%;
		// background-color: skyblue;

		>image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	// 施工主要数据
	.constructionData {
		// height: 300rpx;
		background-color: #ffffff;
		border-radius: 15rpx;
		margin: auto;
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

	}

	.shuju {
		font-size: 28rpx;
		font-weight: 800;
	}

	.constructionData {
		padding: 10rpx 30rpx;
		margin: 18rpx;

		.epoxy-pandata {
			padding: 20rpx 0;
			border-bottom: 2px solid #f3f3f3;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}

	.step-context {
		text-align: right;
		width: 60%;
	}

	.epoxy-pandata-flex {
		border-bottom: 2rpx solid #f3f3f3;

		.step-display {
			margin-left: 20rpx;
			word-break: break-all;
			display: flex;
			flex-wrap: wrap;

			.step-text-display {
				padding: 10rpx 0 10rpx 0;
				border-bottom: 2rpx solid #f3f3f3;
				display: flex;
				flex-wrap: wrap;
				margin-right: 30rpx;

				view {}
			}
		}
	}

	.epoxyDosage {
		width: 100%;
		// background-color: #04be02;
		margin: auto;
		display: flex;
		justify-content: space-between;
	}

	// 巴氏硬度试验
	.Pasteur {
		height: 150rpx;
		// background-color: burlywood;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.PasteurHardness {
		// background-color: red;
		width: 53%;
		display: flex;
		justify-content: space-around;
	}

	.starboardCollection {
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		// background-color: blue;
	}

	.starboard {
		// background-color: red;
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.starboardLine {
		width: 90%;
		height: 4rpx;
		background-color: #f3f3f3;
	}

	// 底部照片
	.constructionPhotos {
		width: 95%;
		background-color: #ffffff;
		margin: auto;
		margin-top: 20rpx;
		border-radius: 15rpx;
	}

	.constructionPhotos>view {
		margin: auto;
		width: 90%;
		height: 40rpx;
	}

	.constructionPhotos>view:nth-child(2) {
		padding: 0 0 20rpx 0;
	}

	.finish {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.photos {
		width: 220rpx;
		display: flex;
		justify-content: space-between;
		// background-color: red;
	}

	.photos>image {
		width: 40rpx;
		height: 40rpx;
	}
</style>
<!-- 照片组件样式 -->
<style lang="scss">
	.cidental {
		width: 200rpx;
		height: 210rpx;
	}

	.bigCertificate {
		width: 580rpx;
		height: 450rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.epoxy-steps {
		display: flex;
		background-color: #fff;
		justify-content: center;
		border-radius: inherit;
		color: #666;
		padding-bottom: 40rpx;


		text {
			font-size: 24rpx;
		}

		// 中间循环的线
		.speed-progress {
			display: inline-flex;
			width: 30px;
			flex-direction: column;
		}

		.speed-utext {
			padding: 25rpx 0 0 0;
			display: flex;
			flex-direction: column;
			// flex: 1;
			align-items: center;
			justify-content: center;

			.line-segment {
				width: 1px;
				height: 100rpx;
				background-color: #B7BDC6;
			}
		}

		// 右边具体的数据
		.steps-context {
			display: flex;
			flex-direction: column;
		}

		.context-value {
			display: flex;
			flex-direction: column;
			padding: 10px 8px;
			border-bottom: none;
			position: relative;
			font-size: 26rpx;
			// background-color: antiquewhite;
		}

		.value-backgroud {
			border-radius: 10rpx;
			padding: 20rpx 0 0 0;
			height: 100rpx;
			text-align: right;

			>text {
				font-weight: 700;
				font-family: "Microsoft YaHei", 微软雅黑
			}

			.disPlayView {
				position: relative;
				top: 20px;
				left: 50px;
				width: 70px;
				text-align: center;
				background-color: #EDEDED;
				border-radius: 5px;
			}

			.disPlayViewsad {
				width: 50px;
				height: 10px;
			}
		}

		.takeRders {
			border-radius: 10rpx;
			padding: 20rpx 0 0 0;
			display: flex;
			flex-direction: column;
			font-size: 26rpx;
			height: 100rpx;
			// background-color: aqua;

			>view:nth-child(1) {
				width: 400rpx;

				.textColor {
					color: #0066FF;
				}
			}

			.locatIcon {
				display: flex;
				// align-items: center;

				.locateimgae {
					margin-top: 5px;
					width: 10px;
					height: 12px;
				}

				.sdfa {
					width: 50px;
				}

				.itemGps {
					font-size: 22rpx;
					width: 200px;
					margin-left: 3px;
					display: flex;
					overflow: hidden;
					table-layout: fixed;
					word-wrap: break-all;
					word-break: normal;
					// background-color: aqua;
				}
			}


		}
	}

	.colorblank {
		color: #989898;
	}

	.TakeColor {
		margin-left: 10px;
		font-size: 26rpx;
	}

	.fontText {
		font-size: 26rpx;
	}

	.active {
		color: #FFAA00;
	}
</style>